<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>班级信息管理</title>
    <link href="/cms/frame/bootstrap-4.6.2-dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/cms/frame/bootstrap-icons-1.11.3/font/bootstrap-icons.min.css">
    <link href="/cms/frame/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        html,
        body,
        #clasContainer {
            width: 100%;
            height: 100%;
        }

        #clasContainer {
            display: flex;
            flex-direction: column;
        }

        #clasNav {
            height: 50px;
            width: 100%;
            display: flex;
            align-items: center;
            font-size: 14px;
            font-family: 华文宋体;
            border-bottom: 1px solid rgba(0, 255, 178, 0.04);
        }

        #clasNav span {
            margin-left: 10px;
            margin-right: 10px;
        }

        #clasBar {
            display: flex;
            justify-content: space-between;
            margin: 10px 5px;
        }

        #clasBar.addBtn i {
            margin-right: 10px;
        }

        #clasBar.searchContainer {
            width: 500px;
        }

        #clasCenter {
            width: 100%;
            flex: 1;
        }
    </style>
</head>

<body>
<div id="clasContainer">
    <div id="clasNav">
        <span>班级管理</span>/<span>班级信息管理</span>
    </div>
    <div id="clasBar">
        <div>
            <button class="btn btn-success addBtn" onclick="showAddDialog()"><i class="bi bi-person-plus"></i>添加</button>
            <button class="btn btn-danger addBtn" onclick="quantityDelete()"><i class="bi bi-person-x"></i>批量删除</button>
        </div>
        <div class="searchContainer">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="请输入班级名" id="searchname">
                <div class="input-group-append">
                    <button class="btn btn-outline-info" type="button" id="btnSearch">
                        <i class="bi bi-search"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div id="clasCenter">
        <table class="table table-bordered table-striped table-hover">
            <thead>
            <tr>
                <th>
                    <input type="checkbox" id="selectAll" onclick="selectAll(this.checked)">
                </th>
                <th>班级号</th>
                <th>年级</th>
                <th>班级名</th>
                <th>辅导员</th>
                <th>班主任</th>
                <th>总人数</th>
                <th colspan="2">操作</th>
            </tr>
            </thead>
            <tbody id="class">
            <tr>
                <td colspan="11" class="text-center">
                    加载中...
                </td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <td colspan="11" id="pageInfo">

                </td>
            </tr>
            </tfoot>
        </table>
    </div>
</div>
<!-- 添加和修改班级模态框开始 -->
<div class="modal fade" id="addclasModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">添加班级</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="addForm" action="#" method="post">
                    <div class="form-group row">
                        <label class="col-md-3 col-form-label text-right" for="clidAdd">班级号：</label>
                        <div class="col-md-8">
                            <input class="form-control" type="text" id="clidAdd" name="clid" placeholder="请输入班级号" readonly>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-3 col-form-label text-right" for="clgradeAdd">年级：</label>
                        <div class="col-md-8">
                            <input class="form-control" type="text" id="clgradeAdd" name="clgrade" placeholder="请输入年级">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-3 col-form-label text-right" for="clnameAdd">班级名：</label>
                        <div class="col-md-8">
                            <input class="form-control" type="text" id="clnameAdd" name="clname" placeholder="请输入班级名">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-3 col-form-label text-right" for="clcounsellorAdd">辅导员：</label>
                        <div class="col-md-8">
                            <input class="form-control" type="text" id="clcounsellorAdd" name="clcounsellor" placeholder="请输入辅导员">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-3 col-form-label text-right" for="clteacherAdd">班主任：</label>
                        <div class="col-md-8">
                            <input class="form-control" type="text" id="clteacherAdd" name="clteacher" placeholder="请输入班主任">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-3 col-form-label text-right" for="cltotalAdd">总人数：</label>
                        <div class="col-md-8">
                            <input class="form-control" type="text" id="cltotalAdd" name="cltotal" placeholder="请输入总人数">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" id="btnSave" class="btn btn-primary" onclick="addclas()">保存</button>
                <button type="button" id="btnEdit" class="btn btn-primary" onclick="editclas()">修改</button>
            </div>
        </div>
    </div>
</div>
<!-- 添加班级模态框结束 -->
<!-- Modal -->
<div class="modal fade" id="myModal" data-backdrop="static" data-keyboard="false" tabindex="-1"
     aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">提示</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <span id="msg"></span>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>
<!-- 删除的模态框 -->
<div class="modal fade" id="myDeleteModal" data-backdrop="static" data-keyboard="false" tabindex="-1"
     aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="delStaticBackdropLabel">提示</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <span id="delMsg"></span>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-secondary" onclick="doDelete()">确定</button>
            </div>
        </div>
    </div>
</div>
</body>
<script src="/cms/frame/js/jquery-3.7.1.min.js"></script>
<script src="/cms/frame/bootstrap-4.6.2-dist/js/bootstrap.bundle.min.js"></script>
<script>
    let pageNum = 1;
    let pageSize = 5;
    let username = '';

    // 页面加载时执行的操作
    jQuery(function () {
        // 显示默认数据
        findByparam();

        // 搜索按钮点击事件
        jQuery("#btnSearch").click(function () {
            pageNum = 1;
            findByparam();
        })
    })

    // 根据条件查询班级信息
    function findByparam() {
        username = jQuery("#searchname").val();
        jQuery.post("/cms/ClasController/findByParam", { pageNum: pageNum, pageSize: pageSize, clname: username }, function (rst) {
            let data = rst.data;
            if (data && data.list.length > 0) {
                let str = '';
                for (let i = 0; i < data.list.length; i++) {
                    let clas = data.list[i];
                    str += `
                        <tr>
                            <td>
                                <input type="checkbox" name="ids" value="${clas.clid}">
                            </td>
                            <td>${clas.clid}</td>
                            <td>${clas.clgrade}</td>
                            <td>${clas.clname}</td>
                            <td>${clas.clcounsellor}</td>
                            <td>${clas.clteacher}</td>
                            <td>${clas.cltotal}</td>
                            <td colspan="2">
                                <a href="#" onclick='showEditDialog(${JSON.stringify(clas)})'><i class="bi bi-pencil"></i>编辑</a>
                                <a href="#" onclick='showDeleteDialog(${JSON.stringify(clas)})'><i class="bi bi-trash"></i>删除</a>
                            </td>
                        </tr>
                    `;
                }
                jQuery("#class").html(str);
                let pageInfoStr = "";
                pageInfoStr += `<nav aria-label="Page navigation example">`;
                pageInfoStr += `<ul class="pagination justify-content-end">`;
                if (data.isFirstPage) {
                    pageInfoStr += `<li class="page-item disabled">
                                    <a class="page-link"><i class="bi bi-chevron-double-left"></i></a>
                                </li>`;
                } else {
                    pageInfoStr += `<li class="page-item">
                                    <a class="page-link" href="#" onclick="findByPage(1)"><i class="bi bi-chevron-double-left"></i></a>
                                </li>`;
                }
                for (let i = 0; i < data.navigatepageNums.length; i++) {
                    pageInfoStr += `<li class="page-item ${pageNum == data.navigatepageNums[i] ? 'active' : ''}" ><a class="page-link" href="#" onclick="findByPage(${data.navigatepageNums[i]})">${data.navigatepageNums[i]}</a></li>`;
                }
                if (data.isLastPage) {
                    pageInfoStr += `<li class="page-item disabled">
                                      <a class="page-link " href="#" aria-label="Next">
                                        <span aria-hidden="true"><i class="bi bi-chevron-double-right"></i></span>
                                      </a>
                                    </li>`;
                } else {
                    pageInfoStr += `<li class="page-item">
                                      <a class="page-link " href="#" onclick="findByPage(${data.navigateLastPage})">
                                        <span aria-hidden="true"><i class="bi bi-chevron-double-right"></i></span>
                                      </a>
                                    </li>`;
                }
                pageInfoStr += `</ul>`;
                pageInfoStr += `</nav>`;
                jQuery("#pageInfo").html(pageInfoStr);
            } else {
                let str = `
                    <tr>
                       <td colspan="11" class="text-center">
                           没有数据
                       </td>
                    </tr>
                `;
                jQuery("#class").html(str);
                jQuery("#pageInfo").html('');
            }
        });
    }

    // 分页查询
    function findByPage(num) {
        pageNum = num;
        findByparam();
    }


    // 修改班级信息
    function showEditDialog(clas) {
        jQuery("#exampleModalLabel").html("修改班级信息");
        jQuery("#btnSave").hide();
        jQuery("#btnEdit").show();
        jQuery("#clidAdd").val(clas.clid);
        jQuery("#clgradeAdd").val(clas.clgrade);
        jQuery("#clnameAdd").val(clas.clname);
        jQuery("#clcounsellorAdd").val(clas.clcounsellor);
        jQuery("#clteacherAdd").val(clas.clteacher);
        jQuery("#cltotalAdd").val(clas.cltotal);
        jQuery("#addclasModal").modal('show');
    }

    // 修改班级信息提交
    function editclas() {
        if (!validateForm()) return;
        jQuery.post("/cms/ClasController/update", jQuery("#addForm").serialize(), function (rst) {
            if (rst.code == 200) {
                jQuery("#addclasModal").modal('hide');
                findByparam();
            }
            jQuery("#msg").html(rst.msg);
            $('#myModal').modal('show');
        });
    }

    // 添加班级对话框显示
    function showAddDialog() {
        jQuery("#exampleModalLabel").html("添加班级信息");
        jQuery("#btnSave").show();
        jQuery("#btnEdit").hide();
        jQuery("#addForm").trigger("reset");
        // 获取并设置下一个班级号
        jQuery.post("/cms/ClasController/getMaxClid", {}, function (response) {
            if (response.code === 200) {
                jQuery("#clidAdd").val(response.data+1);
            } else {
                jQuery("#msg").html(response.msg);
                $('#myModal').modal('show');
            }
        });
        jQuery("#addclasModal").modal('show');
    }

    // 添加班级信息提交
    function addclas() {
        if (!validateForm()) return;
        jQuery.post("/cms/ClasController/save", jQuery("#addForm").serialize(), function (rst) {
            jQuery("#msg").html(rst.msg);
            $('#myModal').modal('show');
            if (rst.code == 200) {
                jQuery("#addclasModal").modal('hide');
                findByparam();
            }
        })
    }

    // 全选/取消全选
    function selectAll(f) {
        jQuery("input[type='checkbox'][name='ids']").prop("checked", f);
    }

    let str = "";

    // 批量删除
    function quantityDelete() {
        let ids = jQuery("input[type='checkbox'][name='ids']:checked");
        if (ids.length == 0) {
            jQuery("#msg").html("请选择要删除的数据！");
            $('#myModal').modal('show');
        } else {
            for (let i = 0; i < ids.length; i++) {
                str += "," + ids[i].value
            }
            str = str.substring(1);
            doDelete(str);
        }
    }

    // 单一删除对话框显示
    function showDeleteDialog(clas) {
        str = clas.clid;
        jQuery("#delMsg").html(`您确定要删除【${clas.clname}】吗?`);
        jQuery("#myDeleteModal").modal('show');
    }

    // 执行删除操作
    function doDelete() {
        jQuery.post("/cms/ClasController/delete", { ids: str }, function (rst) {
            jQuery("#msg").html(rst.msg);
            $('#myModal').modal('show')
            if (rst.code == 200) {
                jQuery("#myDeleteModal").modal('hide');
                findByparam();
            }
        })
    }
    // 验证数据有效性
    function validateForm() {
        let clid = jQuery("#clidAdd").val().trim();
        let clgrade = jQuery("#clgradeAdd").val().trim();
        let clname = jQuery("#clnameAdd").val().trim();
        let clcounsellor = jQuery("#clcounsellorAdd").val().trim();
        let clteacher = jQuery("#clteacherAdd").val().trim();
        let cltotal = jQuery("#cltotalAdd").val().trim();


        // 验证年级
        if (!clgrade) {
            alert("年级不能为空");
            return false;
        }
        if (!/^\d{4}$/.test(clgrade)) {
            alert("年级应为4位有效数字");
            return false;
        }

        // 验证班级名
        if (!clname) {
            alert("班级名不能为空");
            return false;
        }
        if (clname.length > 30) {
            alert("班级名不能超过30个汉字");
            return false;
        }

        // 验证辅导员
        if (!clcounsellor) {
            alert("辅导员不能为空");
            return false;
        }
        if (clcounsellor.length > 20) {
            alert("辅导员名字不能超过20个汉字");
            return false;
        }

        // 验证班主任
        if (!clteacher) {
            alert("班主任不能为空");
            return false;
        }
        if (clteacher.length > 20) {
            alert("班主任姓名不能超过20个汉字");
            return false;
        }

        // 验证总人数
        if (!cltotal) {
            alert("总人数不能为空");
            return false;
        }
        if (!/^(0|[1-9][0-9]{0,3}|10000)$/.test(cltotal)) {
            alert("总人数应为大于0且小于10000的整数");
            return false;
        }

        return true; // 所有验证通过
    }
</script>

</html>